<template>
	<view class="content">
		<view class="header">
			<p v-if="show">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<u-avatar :src="src7"></u-avatar>
					</view>
				</view>
				<span @click='logins'>登录/注册</span>
			</p>
			<view v-else class="box">
				<view class="hea">
					<img src="../../static/ding.png" mode=""/>
				</view>
				<span class="zhong" v-model="Mobile">{{Mobile}}</span>
				<span class="right" @click='login'>切换账号 ></span>
				<span class="tuichu" @click="tuichu">退出登录</span>
			</view>

		</view>
		<view class="main">
			<u-toast ref="uToast"></u-toast>
			<view class="main-moder">
				<u-cell-group title-bg-color="rgb(243, 244, 246)">
					<u-cell :titleStyle="{fontWeight: 500}" :title="item.title" v-for="(item, index) in list"
						:key="index" isLink :icon="item.iconUrl" @click="showToast(item)">
					</u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
	export default {
		data() {
			return {
				Mobile: "15362457785",
				timer: null,
				show: false,
				list: [{
						type: 'default',
						title: '常用联系人',
						message: "联系人",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					},
					{
						type: 'error',
						// icon: false,
						title: '我的订单',
						message: "订单",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'success',
						title: '客服中心',
						message: "客服服务",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					}
				],
			}
		},
		computed: {
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			},
		},
		// onLoad() {
		// 	location.reload()
		// },
		methods: {
			open() {
				this.show = !this.show
			},
			showToast(item) {
				// this.$refs.uToast.show({
				// 	...params,
				// 	complete() {
				// 		params.url && uni.navigateTo({
				// 			url: params.url
				// 		})
				// 	}
				// })
				if (item.title == '常用联系人') {
					uni.navigateTo({
						url: '/pages/Passenger list/Passenger list'
					});
				}
				if (item.title == '我的订单') {
					uni.switchTab({
						url: '/pages/Order/Order'
					});
				}
				if (item.title == "客服中心") {
					uni.switchTab({
						url: '/pages/Customer/Customer'
					});
				}
			},
			tuichu() {
				uni.clearStorageSync("token")
			},
			logins() {
				this.show = true
				uni.navigateTo({
					url: '/pages/Login/Login'
				})
			},
			randomMobile() {
				let prefixArray = ['130', '131', '132', '133', '134', '135', '136', '137', '138',
					'139', '147', '150', '151', '152', '153', '155', '156', '157', '158',
					'159', '186', '187', '188', '189'
				]
				let prefix = prefixArray[Math.floor(Math.random() * prefixArray.length)] // 随机选择手机号前缀
				let suffix = ''
				for (let i = 0; i < 8; i++) {
					suffix += Math.floor(Math.random() * 10) // 生成8位随机数字
				}
				return prefix + suffix
			},
			login() {
				this.show = false
				console.log(this.Mobile);
				uni.navigateTo({
					url: '/pages/Login/Login'
				})
				this.timer = setTimeout(() => {
					this.Mobile = this.randomMobile()
				}, 1000)

			},

		},
		onShow() {
			let token = uni.getStorageSync('token')
			if (token) {
				this.show = false
				this.Mobile=token.username
			} else {
				this.show = true
			}
			
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
	}

	.header {
		width: 100vw;
		height: 45vh;
		background-color: #00ACBD;
		border-bottom-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;

		p {
			padding-top: 160rpx;
			text-indent: 7em;
			font-size: 45rpx;
			color: #fff;

			span {
				display: block;
				font-size: 32rpx;
				padding-top: 40rpx;
			}
		}
	}

	.main {
		width: 96vw;
		height: 368rpx;
		background-color: #fff;
		margin-left: 2vw;
		border-radius: 20rpx;
		margin-top: -180rpx;

		.main-moder {
			width: 94%;
			margin-left: 3%;
		}
	}

	.u-cell__body {
		height: 120rpx;
		line-height: 120rpx;

		.u-icon__img {
			font-size: 26rpx;
		}

		.u-cell__title-text {
			margin-left: 10rpx;
			font-style: 12rpx;
		}
	}

	.u-demo-block__content {
		margin-left: 45%;
		@include flex;
		align-items: center;

	}

	.box {
		display: flex;
		padding-top: 180rpx;

		.hea {
			margin-left: 3%;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #fff;
			img{
				width: 100%;
				height: 100%;
			}
		}

		.zhong {
			margin: auto;
			color: #F5F5F5;
			font-size: 40rpx;
		}

		.right {
			margin: auto;
			color: #F5F5F5;
			font-size: 33rpx;
		}
		.tuichu{
			margin: auto;
			color: #F5F5F5;
			font-size: 33rpx;
		}
	}
</style>